<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="../app/js/util.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/vue.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/jquery-3.3.1.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/element-china-area-data.iife.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <div>
            <el-form ref="register" label-width="100px" label-position="left" size="mini" class="register-form"
                     :model="register"
                     :rules="rules">

                <h4>注册</h4>

                <el-form-item label="用户名" prop="name">
                    <el-input type="text" maxLength="64" placeholder="请输入" v-model="register.name"></el-input>
                </el-form-item>

                <el-form-item label="昵称" prop="nick_name">
                    <el-input type="text" maxLength="64" placeholder="请输入" v-model="register.nick_name"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input type="email" maxLength="64" placeholder="请输入" v-model="register.email"></el-input>
                </el-form-item>

                <el-form-item label="手机" prop="phone">
                    <el-input type="phone" maxLength="64" placeholder="请输入" v-model="register.phone"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" maxLength="64" placeholder="请输入" v-model="register.password"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" maxLength="64" placeholder="请输入" v-model="register.checkPassword"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-select v-model="register.sex" placeholder="请选择">
                        <el-option label="男" value="MAN"></el-option>
                        <el-option label="女" value="WOMAN"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="地区" prop="area">
                    <el-cascader size="mini" placeholder="请选择" v-model="register.area" :options="area"></el-cascader>
                </el-form-item>

                <el-form-item label="详细地址" prop="address">
                    <el-input type="text" maxLength="255" placeholder="请输入" v-model="register.address"></el-input>
                </el-form-item>

                <el-form-item label="个性签名" prop="user_desc">
                    <el-input type="text" maxLength="255" placeholder="请输入" v-model="register.user_desc"></el-input>
                </el-form-item>

                <div class="button">
                    <el-button @click="submitForm">注册</el-button>
                </div>

            </el-form>
        </div>
    </template>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                area: elementChinaAreaData.regionData,
                codeToText: elementChinaAreaData.codeToText,
                codeToTextFunc: elementChinaAreaData.codeToTextFunc,
                textToCodeFunc: elementChinaAreaData.textToCodeFunc,
                register: {
                    name: null,
                    nick_name: null,
                    email: null,
                    phone: null,
                    sex: null,
                    area: null,
                    address: null,
                    user_desc: null,
                    type: null,
                    source: null,
                    password: null,
                    checkPassword: null,
                    datatime: null
                },
                rules: {
                    name: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }],
                    nick_name: [],
                    email: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        type: 'email',
                        message: '请输入正确格式的邮箱',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        pattern: /^1[3-9][0-9]{9}$/,
                        message: '请输入正确格式的手机号',
                        trigger: 'blur'
                    }],
                    sex: [],
                    area: [],
                    address: [],
                    user_desc: [],
                    password: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        pattern: /^[a-zA-Z0-9]{1,64}$/,
                        message: '请输入正确格式的密码（密码又1-64位数字和字母组成）',
                        trigger: 'blur'
                    }],
                    checkPassword: [{
                        required: true,
                        message: '该项为必填项',
                        trigger: 'blur'
                    }, {
                        validator: (rule, value, callback) => {
                            if (value !== this.register.password) {
                                callback('两次输入密码不一致!');
                            }
                            callback();
                        },
                        trigger: 'blur'
                    }]
                },
            };
        },
        methods: {
            submitForm() {
                this.$refs['register'].validate(valid => {
                    if (!valid) {
                        this.$message.error('检验失败');
                        return false;
                    }
                    this.$confirm('确认提交？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(async () => {
                        try {
                            const data = JSON.parse(JSON.stringify(this.register));
                            data = meaninglessValueToNullValue(data);
                            data.area = this.codeToTextFunc(data.area);
                            const result = await myFetch('http://localhost:1628/production/controller/auth/Register', {
                                'record': data,
                                'userPackage': JSON.stringify({
                                    'id': 'a76945b5-019a-4a19-bb81-430b2e598053',
                                    'auth': {'database': {'*': ['*']}}
                                })
                            });
                            const body = await result.json();
                            if (body.data) {
                                this.$message.success('注册成功');
                                setTimeout(() => {
                                    window.location.replace('./login.html');
                                }, 1500);
                                return;
                            }
                            this.$message.error('注册失败：' + body.errorMessage);
                        } catch (err) {
                            console.error(err);
                            this.$message.error('请求失败');
                        }
                    });
                });
            }
        }
    });
</script>
</body>
<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        position: fixed;
        background: url('../app/resource/背景.png') no-repeat;
        background-size: cover;
    }

    .register-form {
        width: 400px;
        height: max-content;
        top: 50%;
        left: 50%;
        opacity: 0.65;
        position: absolute;
        padding: 50px 30px;
        padding-top: 20px;
        border-radius: 20px;
        background-color: #000000;
        transform: translate(-50%, -50%);
        box-shadow: #000000 0px 0px 10px;
    }

    .register-form > h4 {
        color: white;
        text-align: center;
    }

    .button {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .button > button {
        width: 200px;
        height: auto;
        color: white;
        background-image: linear-gradient(to right, #30cfd0, #330867);
    }

</style>
</html>